<template>
    <div>
        <!-- 共用头部组件 -->
        <common-header
            headerTitle="我的"
            :hasBack="false"
            :hasHome="true"
        ></common-header>
        <!-- 共用头部组件 -->

        <!-- 共用页面滚动组件 -->
        <common-scroll
            :scrollStyle="scrollStyle"
            :isLoadMore="false"
        >

            <!-- 用户信息组件 -->
            <user-info
                :userInfo="userInfo"
                :userAccountInfo="userAccountInfo"
                @concatShow="concatShow"
            ></user-info>
            <!-- 用户信息组件 -->

            <!-- 用户数据 -->
            <user-data
                v-if="userInfo.vip_level>0"
                :myVipData="myVipData"
                :teamVipData="teamVipData"
            ></user-data>
            <!-- 用户数据 -->

            <!-- 用户权益 -->
            <user-legal
                :teamVipData="teamVipData"
                :userAccountInfo="userAccountInfo"
                v-if="userInfo.vip_level>1"
            ></user-legal>
            <!-- 用户权益 -->

            <!-- 订单导航栏组件 -->
            <user-order></user-order>
            <!-- 订单导航栏组件 -->

            <!-- 消息轮播组件 -->
            <message-swiper></message-swiper>
            <!-- 消息轮播组件 -->

            <!-- 用户中心广告 -->
            <adv-box></adv-box>
            <!-- 用户中心广告 -->

            <!-- 用户功能组件 -->
            <user-func
                :userInfo="userInfo"
                :userAccountInfo="userAccountInfo"
                @goBindPhone="goBindPhone"
                @shareShow="showShareImg"
            ></user-func>
            <!-- 用户功能组件 -->

        </common-scroll>
        <!-- 共用页面滚动组件 -->

        <!-- 共用底部导航栏 -->
        <common-footer nowPage="4"></common-footer>
        <!-- 共用底部导航栏 -->

        <!-- 分享引导组件 -->
        <share-img
            :shareImgShow="shareImgShow"
            :headerImgUrl="headerImgUrl"
            :userInfo="userInfo"
            @closeShareImg="shareImgShow = false"
        >
        </share-img>
        <!-- 分享引导组件 -->

        <!-- 联系店主组件 -->
        <div
            class="concat-bg"
            v-if="showConcat"
            @click.prevent.self="showConcat = false"
        >
            <img
                class="concat-img"
                :src="concatCode"
            />
            <div class="concat-tips">长按识别二维码添加好友</div>
        </div>
        <!-- 联系店主组件 -->

        <!-- 绑定手机组件 -->
        <bind-phone
            :bindPhone="bindPhone"
            @closeBindPhone="closeBindPhone"
        ></bind-phone>
        <!-- 绑定手机组件 -->
    </div>
</template>

<script>
import CommonHeader from '@/components/Header'
import CommonFooter from '@/components/Footer'
import CommonScroll from '@/components/Scroll'
import UserInfo from './components/UserInfo'
import UserData from './components/UserData'
import UserLegal from './components/UserLegal'
import UserOrder from './components/UserOrder'
import AdvBox from './components/AdvBox'
import UserFunc from './components/UserFunc'
import ShareImg from './components/ShareImg'
import MessageSwiper from '@/pages/Home/components/MessageSwiper'
import BindPhone from '@/components/BindPhone'
export default {
    name: 'UserCenter',
    components: {
        CommonHeader,
        CommonScroll,
        CommonFooter,
        UserInfo,
        UserData,
        UserLegal,
        MessageSwiper,
        UserOrder,
        AdvBox,
        UserFunc,
        ShareImg,
        BindPhone
    },
    data() {
        return {
            scrollStyle: {
                top: '1.11rem',
                left: '0',
                right: '0',
                bottom: '1.17rem'
            },
            userInfo: '',
            userAccountInfo: '',
            myVipData: '',
            teamVipData: '',
            shareTips: false,
            headerImgUrl: '',
            showConcat: false,
            concatCode: '',
            bindPhone: false,
            shareImgShow: false
        }
    },
    mounted() {
        this.getUserInfo()
        this.getAgentInfo()
    },
    methods: {
        showShareImg() {
            this.shareImgShow = true
        },
        getAgentInfo() {
            this.axios.post('/api/user/agent/my_agent_info.json').then(res => {
                const data = res.data
                if (data.status == 1) {
                    this.concatCode = data.data.link_qcode
                } else {
                    this.commonDialog.alert('提示', data.msg)
                }
            })
        },
        getUserInfo() {
            this.axios.post('/api/user/my_info.json').then(res => {
                const data = res.data
                if (data.status == 1) {
                    this.userInfo = data.data
                    sessionStorage.setItem(
                        'userInfo',
                        JSON.stringify(data.data)
                    )
                    if (this.userInfo.face == '') {
                        this.headerImgUrl = null
                        return
                    } else {
                        this.toBase64(this.userInfo.face, 'headerImgUrl')
                    }
                }
            })
            this.axios.post('/api/user/data.json').then(res => {
                const data = res.data
                if (data.status == 1) {
                    this.userAccountInfo = data.data
                    this.isTips()
                } else {
                    this.commonDialog.alert('提示', data.msg)
                }
            })
            this.axios
                .post('/api/user/data_center/direct_count.json')
                .then(res => {
                    const data = res.data
                    if (data.status == 1) {
                        this.myVipData = data.data
                    } else {
                        this.commonDialog.alert('提示', data.msg)
                    }
                })
            this.axios
                .post('/api/user/data_center/team_count.json')
                .then(res => {
                    const data = res.data
                    if (data.status == 1) {
                        this.teamVipData = data.data
                    } else {
                        this.commonDialog.alert('提示', data.msg)
                    }
                })
            if (this.userInfo.face == '') {
                this.headerImgUrl = null
                return
            } else {
                this.toBase64(this.userInfo.face, 'headerImgUrl')
            }
        },
        isTips() {
            let date = new Date()
            let year = date.getFullYear()
            let month = date.getMonth() + 1
            let day = date.getDate()
            month = month < 10 ? '0' + month : month
            let lastDaty = new Date(year, month, 0).getDate()
            if (lastDaty - day < 3 && this.userAccountInfo.free_times > 0) {
                this.commonDialog.alert(
                    '提示',
                    '您本月还有免费领取机会，请尽快领取！'
                )
            }
        },
        concatShow() {
            if (this.concatCode == '' || this.concatCode == null) {
                this.commonDialog.alert('提示', '您的邀请人暂未上传联系方式！')
                return
            }
            this.showConcat = true
        },
        toBase64(url, target) {
            let postData = this.qs.stringify({
                url: url
            })
            this.axios.post('/api/img/base64.json', postData).then(res => {
                const data = res.data
                if (data.status == 1) {
                    this[target] = data.data
                } else {
                    this.commonDialog.alert('提示', data.msg)
                }
            })
        },
        goBindPhone() {
            this.bindPhone = true
        },
        closeBindPhone() {
            this.bindPhone = false
        }
    }
}
</script>

<style lang="stylus" scoped>
.concat-bg
    position fixed
    top 0
    left 0
    right 0
    bottom 0
    padding 5% 10%
    background-color rgba(0, 0, 0, 0.7)
    z-index 9
    display flex
    align-items center
    justify-content center
    flex-direction column
    .concat-img
        width 6rem
    .concat-tips
        margin-top 0.37rem
        font-size 0.38rem
        color #fff
</style>


